<template>
	<view style="background-color: #F5F5F5;">
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
			      <navigator open-type="navigateBack" style="padding:10rpx">
			        <image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
			      </navigator>
			      <text>预留手机号绑定</text>
			      <!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			  </view>
		</view>
		<view class="box topnext">
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						选择房产
					</view>
					<picker 
					mode="multiSelector" 
					:range="list" 
					range-key="title" 
					:value="value"
					@columnchange="changecolum"
					@change="setroom">
						<view class="uni-input">{{formatvalue}}</view>
					</picker>
					<image class="box1-1img" src="https://x.bilinmeiju.com/static/my/yjt.png" mode=""></image>
				</view>
			</view>
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						您的身份
					</view>
					<picker mode="selector" range-key="title" :range="shenfenlist" :value="shenfen" @change="setshenfen">
						<view class="uni-input">{{formatshenfen}}</view>
					</picker>
					<image class="box1-1img" src="https://x.bilinmeiju.com/static/my/yjt.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						是否公开
					</view>
					<view class="uni-inputss">
						<image class="uni-bg-reddui" @click="isopen=!isopen" :src="isopen?'/static/denglu/xz.png':'/static/denglu/wzx.png'" mode=""></image>
						<view class="">
							是
						</view>
					</view>
				</view>
			</view> -->
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						姓名
					</view>
					<input class="uni-input" type="text" v-model="name" placeholder="点击输入真实姓名">
				</view>
			</view>
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						手机号
					</view>
					<input class="uni-input" type="number" v-model="yzphone" placeholder="选择房产后自动显示" disabled/>
				</view>
			</view>
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						验证码
					</view>
					<input class="uni-inputcc" v-model="code" type="text" placeholder="输入验证码">
					<view class="yzm" @click="getcode">
						{{codetxt}}
					</view>
				</view>
			</view>

		</view>
		<view class="textcc">
			通过房产预留手机号的验证码进行绑定
		</view>
		<view class="bottom" @click="bindroom">
			提交
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				CustomBar: 0,
				topheight: 0,
				phone:'',//ok
				oldphone:'',//ok
				code:'',//ok
				codetxt:'获取验证码',
				list:[],
				datas:{},
				value:[],
				formatvalue:'请选择您的房产',
				buildingId:'',//ok
				unitId:'',//ok
				roomId:'',//ok
				shenfenlist:[
					{title:'业主',value:1},
					{title:'租客',value:2},
					{title:'家属',value:3}
				],
				shenfen:0,
				formatshenfen:'业主',
				shenfenval:1,//ok
				isopen:true,//ok
				sec:0,
				yzphone:'',
				bartop:0
			}
		},
		onLoad() {
			this.bartop = this.$bartop;
			this.$post('center/getmyphone',{}).then(res=>{
				this.oldphone = res.data.phone;
				this.phone = res.data.phone;
				this.list = res.data.list;
				this.value = [0,0,0]
			})
			this.daojishi();
		},
		methods: {
			bindroom(){
				var data = {
					phone:this.phone,
					oldphone:this.oldphone,
					buildingId:this.buildingId,
					unitId:this.unitId,
					roomId:this.roomId,
					code:this.code,
					shenfen:this.shenfenval,
					isopen:this.isopen?1:0,
					roomname:this.formatvalue,
					name:this.name
				}
				this.$post('center/bindroom',data).then(res=>{
					if(res.code===0){
						uni.showModal({
							title:'绑定提示',
							content:res.msg,
							showCancel:false,
							success() {
								uni.navigateBack({
									delta:2,
									success() {
										
									},
									fail(e) {
										console.log(e)
									}
								})
							}
						})
					}
				})
			},
			getcode(){
				var codetxt = this.codetxt;
				if(codetxt!='获取验证码') return false;
				var yzphone = this.phone;
				if(!yzphone){
					uni.showToast({
						title:this.formatvalue ? '请使用证件绑定':'请选择房产',
						icon:'error'
					})
					return false;
				}
				uni.showLoading({
					title:'加载中'
				})
				this.$post('api/sendcode',{phone:yzphone}).then(res=>{
					uni.hideLoading()
					if(res.code===0){
						var date = new Date();
						uni.setStorageSync('sec',date.getTime()*1+120*1000);
						this.codetxt = '重获取(120秒)';
						this.daojishi()
					}
				})
			},
			daojishi(){
				var that = this;
				var date = new Date();
				var nowtime = date.getTime()*1;
				var endtime = uni.getStorageSync('sec');
				var cha = (endtime-nowtime)/1000;
				cha = cha.toFixed(0)
				if(cha>0){
					that.codetxt = '重获取('+cha+'秒)';
					setTimeout(function(){
						that.daojishi();
					},1000)
				}else{
					uni.setStorageSync('sec',0);
					that.codetxt = '获取验证码';
				}
			},
			setshenfen(e){
				var index = e.detail.value*1;
				var shenfenlist = this.shenfenlist;
				this.formatshenfen = shenfenlist[index].title;
				this.shenfenval = shenfenlist[index].value;
			},
			changecolum(e){
				var column = e.detail.column;
				var index = e.detail.value;
				if(column==0){
					//获取吧
					var buildingId = this.list[column][index]['buildingId'];
					this.getlist2(buildingId);
					this.value = [index,0,0]
				}
				if(column==1){
					var unitId = this.list[column][index]['unitId'];
					this.getlist3(unitId);
					this.value[1] = index;
					this.value[2] = 0;
				}
				if(column==2){
					this.value[2] = index;
				}
				this.$forceUpdate();
			},
			getlist2(buildingId){
				this.$post('center/getdanyuan',{buildingId:buildingId}).then(res=>{
					if(res.data.list){
						this.list[1] = res.data.list;
						this.getlist3(res.data.list[0]['unitId']);
					}else{
						this.list[1] = [];
					}
				this.$forceUpdate();	
				})
			},
			getlist3(unitId){
				this.$post('center/gethushi',{unitId:unitId}).then(res=>{
					if(res.data.list){
						this.list[2] = res.data.list;
					}else{
						this.list[2] = [];
					}
					this.$forceUpdate();
				})
			},
			setroom(e){
				this.value = e.detail.value;
				var value = this.value;
				var list = this.list;
				var str = list[0][value[0]].title+'/';
					str+= list[1][value[1]].title+'/';
					str += list[2][value[2]].title;
				this.formatvalue = str;
				// buildingId:'',
				// unitId:'',
				// roomId:''
				this.buildingId = list[0][value[0]].buildingId;
				this.unitId = list[1][value[1]].unitId;
				this.roomId = list[2][value[2]].roomId;
				this.$post('center/roominfo',{roomId:this.roomId}).then(res=>{
					this.phone = res.data.yzphone;
					this.yzphone = res.data.hideyzphone;
				})
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.beijing {
		width: 100vw;
		height: 174rpx;
		z-index: 1;
		position: absolute;
		top: 0;
	}

	.top {
		z-index: 5;
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.toptext {
		z-index: 5;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		line-height: 36rpx;
	}

	.top1img {
		z-index: 5;
		width: 20rpx;
		height: 36rpx;
	}

	.box {
		width: 700rpx;
		background-color: #ffffff;
		margin: 0 auto;
	}

	.box1 {
		width: 650rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin: 0rpx auto;
	}

	.uni-input {
		width: 500rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.uni-inputss {
		display: flex;
		align-items: center;
	}

	.uni-bg-reddui {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.uni-inputcc {
		width: 300rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.box1-1 {
		/* margin-top: 20rpx; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box1-1text {
		width: 150rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
	}

	.box1-1img {
		width: 10rpx;
		height: 20rpx;
	}

	.yzm {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FE7B00;
	}

	.textcc {
		margin-left: 50rpx;
		margin-top: 10rpx;
		font-size: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.bottom {
		margin-top: 30rpx;
		font-size: 40rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		width: 700rpx;
		height: 100rpx;
		margin-left: 25rpx;
		background-color: rgb(255, 174, 69);
		border-radius: 50rpx;
	}
</style>
